<template>
  <div class="app-container">
    <el-form :model="form" ref="form" v-show="showSearch" label-width="100px">
      <div style="margin-top: -40px;">
        <div style="font-size: 20px; margin-bottom: 20px;">基本信息
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="活动封面图">
              <el-image :z-index="zIndex" :preview-src-list="[form.lotteryImg]"
                :src="form.lotteryImg"  style="width: 70px;height: 70px;margin-left: 10px">
              </el-image>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动详情图">
              <el-image :z-index="zIndex" :preview-src-list="[form.lotteryRemarkImg]"
                :src="form.lotteryRemarkImg"  style="width: 70px;height: 70px;margin-left: 10px">
              </el-image>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="活动标题" width="400px">
              <span>{{ form.lotteryTitle }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="抽奖周期" width="400px">
              <span>{{ form.lotteryFrequencyName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间" width="400px">
              <span>{{ form.lotteryStarttime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" width="400px">
              <span>{{ form.lotteryEndtime }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="抽奖次数" width="400px">
              <span>{{ form.lotteryLimit }} 次</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="消耗积分" width="400px">
              <span>{{ form.lotteryFate || '-' }} 积分</span>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="中奖名单显示" width="400px">
              <span>{{ form.lotteryShowName }} </span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动描述" width="400px">
              <span>{{ form.lotteryText }}</span>
            </el-form-item>
          </el-col>
        </el-row>


        <div style="font-size: 20px; margin-bottom: 30px;" >
          <div style="margin-top: 20px;" v-if="form.detailList && form.detailList.length > 0 ">奖品信息
            <el-table  :data="form.detailList" stripe style="width: 100%" border>
              <el-table-column prop="prizeUrl" label="图片" width="80" align="center">
                <template slot-scope="scope">
                  <el-image :z-index="zIndex" v-if="scope.row.prizeUrl != null && scope.row.prizeUrl != '' "
                    slot="reference" :src="scope.row.prizeUrl" class="image-rows" :preview-src-list="[scope.row.prizeUrl]">
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column prop="prizeTypeStr" label="奖品类型" :show-overflow-tooltip="true" width="200"/>
              <el-table-column prop="prizeName" label="奖品名字" :show-overflow-tooltip="true" width="200"/>
              <el-table-column prop="prizeAmount" label="奖品数量" :show-overflow-tooltip="true" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.prizeAmount || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="prizeNumber" label="奖品库存" align="center"/>
              <el-table-column prop="prizeProbability" label="中奖概率" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.prizeProbability || '-' }}%</span>
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="提示语" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.remark || '-' }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

      </div>
    </el-form>

  </div>
</template>

<script>

  export default {
    name:"lottery",
    props: ["lotteryVo"],
    components:{
    },
    data() {
      return {
        zIndex: 3000,
        showSearch: true,
        // 预览图片
        carouselImgs: [],
        detailImgs: [],
        // 表单参数
        form: {
          detailList:[],
        },
      };
    },
    created() {
      this.form = JSON.parse(JSON.stringify(this.lotteryVo));
      console.log(this.form)
    },
    methods: {

    }
  };
</script>

<style scoped>
  .el-form-item {
    margin-bottom: 0;
  }
</style>
